<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      border: 50px solid rgba(0,0,0,0.2);
      padding: 50px;
      width: 400px;
      height: 300px;
      /* background: url('./img/bd_logo1.png') no-repeat left bottom, url('./img/zbios_efde696.png') no-repeat right top; */
      background: url('./img/my.png');
      background-origin: border-box;
      background-clip: content-box;
      /* background-size: contain; */

    }
    .dot {
      display: block;
      border-radius: 50%;
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      background: #000;
      border: 5px solid;
      padding: 5px;
      background-clip: content-box;
    }
  </style>
</head>
<body>
  <!-- 
    background-image
      元素背景图可以同时添加多个
      background: url() no-reapt, url()

      添加多个图片是，第一个图片在最上面
    background-size
      设置背景图的大小
      如果只设置一个值，那么对应的高度也会跟着变化
      如果设置两个值，那么第一个值表示x轴的变化，第二个值表示y轴的变化
      cover 永远会让背景图整个铺满盒子，不会出现空白区域，背景图不会出现变形情况
      contain 只会填充一个比较短的边，如果另外一边继续边长，则出现空白 保证图片会整个出现在背景上
    background-orgin
      背景图绘制的开始位置
      默认为padding-box 对背景色无效
    background-clip
      背景图绘制区域

      border-box
      padding-box
      content-box

    background: url() no-reapeat positionx positiony / sizex sizey;

    font: 12px / 20px;

   -->
  <div></div>
  <i class="dot"></i>
</body>
</html>